<template>
  <div class="login_wrap">
      <div class="form_wrap">
        <h2 class="title">L o g i n</h2>
          <el-form
              ref="formRef"
              :model="loginData"
              label-width="100px"
              class="demo-dynamic"
          >
              <el-form-item
                  prop="username"
                  label="用户名"
                  :rules="[
                      {
                      required: true,
                      trigger: 'blur',
                      }, 
                  ]"
              >
                  <el-input v-model="loginData.username"  style="width: 300px;" required/>
              </el-form-item>
              <span v-if="isEmailValid" style="color: red;" class="email-valid">Please enter a valid email address.</span>
              <el-form-item
                  prop="password"
                  label="密码"
                  :rules="[
                  {
                  required: true,
                  trigger: 'blur',
                  }, 
              ]"
              >
                  <el-input type="password" v-model="loginData.password" style="width: 300px;" required="required"/>
              </el-form-item>
            <div class="forget-div">
              <a href="#" class="forget">ForgotYourPassword?</a>
            </div>
          </el-form>

          <div class="login-button">
            <el-button type="success" class="login_btn" @click="login">Login</el-button>
            <el-button type="danger" class="login_btn" @click="register" ><a href="/login/register">Register</a></el-button>
          </div>
      </div>
  </div>
</template>  



<script lang="ts">
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Login } from '@/api/api';
import {useStore} from '@/static/pinia/user'


  export default{
    name: "Login",
    setup(){
      // 实例化路由对象
      const routers = useRouter()
      const data = reactive({
      loginData: {
        username: '',
        password: ''
      },
      userinfo: ref(),
      loading: ref(),
      regex: ref(/^[^\s@]+@[^\s@]+\.[^\s@]+$/),
      isEmailValid: ref(false)
    })
    const store  = useStore()

    const login = async() => {
      if(!data.regex.test(data.loginData.username)){
        data.isEmailValid = true
        return
      }
      data.loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      Login(
        data.loginData
        ).then(res => {
        data.userinfo = res._rawValue
        if (data.userinfo.userinfo){
          localStorage.setItem('loginData',JSON.stringify(data.loginData))
          store.restoreFromLocalStorage()
          data.loading.close()
          ElMessage({
            message: data.userinfo.message,
            type: 'success',
            duration: 1000,
            center: true,
          })
          routers.push({
            path: '/'
          })
          return
        }
        data.loading.close()
        ElMessage({
          message: '账号密码错误！',
          type: 'error',
          duration: 1000,
          center: true,
        })
      })
      .catch(error => {
        console.log('error:', error);
        data.loading.close()
      })
    }

    const register = () => {
    }
    





    return {
        ...toRefs(data),
        login,
        register
        
        
      }
    }
  }

</script>


<style scoped>

.login_wrap{
      width: 100%;
      height: 100%;
      position: relative;
  }
  .form_wrap{
      position: fixed;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: #ffffff;
      padding:30px 50px;
      border-radius: 5px;
      box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  }
  .login_btn{
      display: block;
      margin: 10px auto;
  }
  .login-button {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    margin-left: 100px;
    margin-top: 20px;
  }

  .title {
    margin-right: 100px;
    margin-bottom: 50px;
    font-weight: bold;
    font-size: 22px;
  }

  .forget-div {
    height: 10px;
    width: 100%;
    margin-bottom: 10px;
  }

  .forget {
    font-size: 10px;
    color: black;
    position: absolute;
    right: 60px;
    bottom: 100px;
    margin-left: 200px;

  }

  .email-valid {
    font-size: 12px;
    margin-left: 100px;
  }
</style>